<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    body{
      text-align: center;
    }
    canvas{
      background: gainsboro;
    }
  </style>
</head>
<body>
<!--
    1 fillRect(x,y,width,height) 第一个参数起点的x轴坐标，第二个参数起点的y轴坐标，矩形的宽度，矩形的高度（填充矩形）
    2 strokeRect()参数和上面相同    （无填充矩形）
    3 addColorStop(pos,color)--给渐变添加位置和颜色，pos 0-1，如果是中间位置，只能是0.5，不能是50%
    4 createLinearGradient--创建的是线性渐变，超出渐变范围的部分，如果再0的旁边，就是0定义的颜色，如果接近1，就是1定义的颜色
    5 createRadialGradient(小圆的x轴坐标，小圆的y轴坐标，小圆的半径，大圆的x轴坐标，大院的额y轴坐标，大圆的半径)，渐变范围是小圆和大圆中间的部分
-->

<canvas id="canvas" width="450" height="450">您的浏览器版本太低，不支持canvas标签，请尽快升级浏览器版本</canvas>

<script type="text/javascript">
    //渐变颜色

    var txt=canvas.getContext('2d');
    var arr=[];
    //利用二维数组存储值
    for(var i=0;i<15;i++){
        // arr=[ [],[],[] ....]
        // arrr=[  [0,0,0,0,0,0...]  ]   arr[0][5] 坐标是（0，5）
        arr[i]=[];
        for(var j=0;j<15;j++){
            arr[i][j]=0;
        }
    }

    for(var i=0;i<15;i++){
        //画横线
        txt.strokeStyle="gray";
        txt.moveTo(15,15+30*i);
        txt.lineTo(435,15+30*i);
        txt.stroke();
        //画纵线
        txt.moveTo(15+30*i,15);
        txt.lineTo(15+30*i,435);
        txt.stroke();
    }

    function circleBlack(x,y){
        txt.beginPath();

        var grd=txt.createRadialGradient(x,y,0,x,y,12);
        grd.addColorStop(0,'gray');
        grd.addColorStop(1,'black');

        txt.fillStyle=grd;
        txt.arc(x,y,12,0,2*Math.PI);
        txt.fill();
    }
    function circleRed(x,y){
        //重新绘制
        txt.beginPath();
        var grd=txt.createRadialGradient(x,y,0,x,y,12);
        grd.addColorStop(0,'white');
        grd.addColorStop(1,'gray');

        txt.fillStyle=grd;
        txt.arc(x,y,12,0,2*Math.PI);
        txt.fill();
    }
    // 1 点击哪出现一个圆
    // 2点击奇数次我出现的是黑子，点偶数次出现的是白子
    // 3假设225个点存储的值是0，0代表的是没有棋子，如果这有棋的画，就alert（’‘），如果没有棋子的画，就让他下棋
    var num=0;
    canvas.onclick=function(env){
        num++;
        var event=window.event||env;
        var x=Math.floor(event.offsetX/30)*30+15;
        var y=Math.floor(event.offsetY/30)*30+15;
        var x1=Math.floor(event.offsetX/30);
        var y1=Math.floor(event.offsetY/30)
        if(arr[x1][y1]==0){
            //这没有棋子
            if(num%2==0){
                circleRed(x,y)
            }else{
                circleBlack(x,y)
            }
            arr[x1][y1]=1;
        }else{
            //就有棋子
            num--;
            alert("您这已经有棋子了，请从其他地方下");
        }
    }

</script>
</body>
</html>
